<template>
    <div class="register">
      <h3>注册新用户
      <span>我有账号,去
        <a href="javascript:void(0)">登录</a>
      </span>
      </h3>
      <div class="content" style="margin-top: 40px">
        <label>手机号:</label>
        <input type="text" placeholder="请输入您的手机号" v-model="phone" name="phone" v-validate="{required:true,
        regex:/^1\d{10}$/}"/>
        <span >{{ errors.first('phone') }}</span>
      </div>
      <div class="content">
        <label>验证码:</label>
        <input type="text" placeholder="请输入验证码" v-model="code" name="code" v-validate="{required:true,
        regex:/^\d{6}$/}"/>
        <input value="点我获取验证码" @click="getCode" type="button" style="width: 120px;padding-left:5px;color:rgb(51, 51, 51)"/>
        <span>{{ errors.first('code') }}</span>
      </div>
      <div class="content">
        <label>登录密码:</label>
        <input type="text" placeholder="请输入您的登录密码" v-model="password" name="password" v-validate="{required:true,
        regex:/^[0-9A-Za-z]{8,20}$/}"/>
        <span>{{ errors.first('password') }}</span>
      </div>
      <div class="content">
        <label>确认密码:</label>
        <input type="text" placeholder="请输入您的确认密码" v-model="password1" name="password" v-validate="{required:true,is:password}"/>
        <span>{{ errors.first('password1') }}</span>
      </div>
      <div class="controls">
        <input type="checkbox" :checked="isCheck" name="agree" v-validate="{required:true,'agree':true}"/>
        <span>同意协议并注册《尚品汇用户协议》</span>
      </div>
      <span style="height:16px;display: block;text-align: center;font-size: 12px;color: red">{{ errors.first('agree') }}</span>
      <button class="btn" @click="managerRegister">完成注册</button>
    </div>
</template>
<script>
import Index from "../login";
export default{
    name:'register',
  components: {Index},
  data(){
      return{
    phone:'',
        code:'',
        password:'',
        password1:'',
        isCheck: true
      }
  },
  methods:{
      async managerRegister(){
        const success=await this.$validator.validateAll()//所有验证通过后才能发请求
        const {phone,code,password,password1}=this
        if(phone&&code&&password&&password1&&(password == password1)&&success) {
          try {
            await this.$store.dispatch('userRegister', {phone, code, password, password1})
            await this.$router.push('/login')
          } catch (error) {
            alert(error.message)
          }
        }
      },
    async getCode(){
      const {phone}=this
      try {
       phone&&(await this.$store.dispatch('getCode', phone))
        this.code=this.$store.state.user.Code
        console.log(this.$store.state)
      }catch (error){
        alert(error.message)
      }
    }
  },
  computed:{

  }
}
</script>
<style lang="less" scoped>
.btn{
  width: 266px;
  height: 32px;
  font-size: 16px;
  background: #e1251b;
  color: #fff;
border:2px solid rgb(118, 118, 118);
  margin: 10px 0 50px 500px;
}
.controls{
  padding-left: 40px;
 text-align: center;
  input{
    vertical-align: middle;
    height: 13px;
  }
  span{
    display: inline-block;
    font-size: 12px;
  }
  span:nth-child(4){
    display: block;
  }
}
.content{
  padding-left: 400px;
  label{
    text-align: right;
    display: inline-block;
    font-size: 14px;
    width: 96px;
  }
  input{
    width: 260px;
    height: 36px;
    margin-left: 5px;
    padding-left: 8px;
    border: 1px solid #999;
    outline: none;
  }
  span{
    height: 15.83px;
    display: block;
    color: red;
    font-size: 12px;
    padding-left: 110px;
  }
}
.register{
  width: 1200px;
  margin: 0 auto;
  border: 1px solid #dfdfdf;
  h3{
    font-size: 20px;
    padding:6px 15px;
    background: #ececec;
    border-bottom: 1px solid #dfdfdf;
    span{
   display: block;
      height: 25px;
      line-height: 25px;
      float: right;
      font-size: 14px;
      a{
        color: #e1251b;
      }
    }
  }
}
</style>
